import React from "react";

/**
 * 组件卸载阶段，要执行的钩子函数
 *
 * componentWillUnmount
 */
class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    // 为事件处理程序绑定this
    console.log("--父1. constructor()");
    this.state = {
      count:0
    }
  }

  handleClick = () => {
    // this.forceUpdate()
    // 改变组件状态
    this.setState({
      count: this.state.count+1
    })
  }

  render() {
    console.log("--父2. render");
    return (
      <div>
        <h1 id='h1-001'>我是H1标签</h1>
        <button onClick={this.handleClick}>点击次数{this.state.count}</button>
        {/* 条件渲染 */}
        {this.state.count > 3 ? null: <Counter count={this.state.count}/>}
        {/* <Counter count={this.state.count}/> */}
      </div>
    );
  }

  componentDidMount() {
    // 发送网络请求
    // DOM操作
    console.log("--父3. componentDidMount()");
  }

  componentDidUpdate() {
    // 发送网络请求
    // DOM操作
    console.log("--父4. componentDidUpdate()");
    // const h1 = document.getElementById('h1-001')
    // console.log(h1.innerHTML)
  }

}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    console.log("----子1. constructor()");
    this.timerId = setInterval(() => {
      console.log('我是启动的定时器，我的Id是：', this.timerId)
    }, 500)
  }

  render() {
    console.log("----子2. render");
    return (
      <div>
        <h3 id='h3-001'>子组件内容：{this.props.count}</h3>
      </div>
    );
  }

  componentDidMount() {
    console.log("----子3. componentDidMount()");
  }

  componentDidUpdate(prevProps) {
    // const h3 = document.getElementById('h3-001')
    // console.log(h3.innerHTML)
    // console.log('----之前的props',prevProps.count)
    // console.log('----当前的props',this.props.count)
    // if(prevProps.count !== this.props.count){
    //   this.setState({})
    // }
    console.log("----子4. componentDidUpdate()");
  }

  componentWillUnmount() {
    console.log("----子5. componentWillUnmount()");
    clearInterval(this.timerId)
  }
}

export default App;
